<template>
    <div>
        <h3 align="left">数据筛选</h3>
        <el-form :inline="true" :model="Form" class="demo-form-inline" align="left" style="margin-top: 3%;">
            <el-form-item label="采购单号：">
                <el-input v-model="Form.ProcurementCode" placeholder="采购单号" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="产品编号：">
                <el-input v-model="Form.ProductCode" placeholder="产品编号" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="产品名称：">
                <el-input v-model="Form.ProductName" placeholder="产品名称" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="订单状态：">
                <el-select v-model="Form.ProcurementState" placeholder="订单状态" style="width: 120px;">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option v-for="item in State" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 3%;">
                <el-button type="primary" icon="el-icon-search" @click="ProcureList">查询</el-button>
                <el-button type="warning" icon="el-icon-refresh-left" @click="result">重置</el-button>
                <el-button type="success" icon="el-icon-circle-plus" @click="add">新增</el-button>
                <el-button type="danger" icon="el-icon-circle-plus" @click="onBatchDel()">批量删除</el-button>
                <el-button type="info" icon="el-icon-upload2" @click="exportListToExcel(Procure)">导出</el-button>
            </el-form-item>
        </el-form>

        <h3 align="left">数据列表</h3>
        <el-table :data="Procure" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="procurementCode" label="订单号">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="productCode" label="产品编号">
            </el-table-column>
            <el-table-column prop="specs" label="产品规格">
            </el-table-column>
            <el-table-column prop="unit" label="单位">
            </el-table-column>
            <el-table-column prop="price" label="单价">
                <template slot-scope="scope">
                    <span> ¥ {{ scope.row.price.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="buyNumber" label="数量">
            </el-table-column>
            <el-table-column prop="sumPrice" label="总额">
                <template slot-scope="scope">
                    <span> ¥ {{ scope.row.sumPrice.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="supplierCode" label="供应商编号">
            </el-table-column>
            <el-table-column prop="supplierName" label="供应商名称">
            </el-table-column>
            <el-table-column prop="sumPrice" label="订单总额">
                <template slot-scope="scope">
                    <span> ¥ {{ scope.row.sumPrice.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="procurementStateName" label="状态">
            </el-table-column>
            <el-table-column prop="procurementProcurement" label="是否入账">
                <template slot-scope="scope">
                    <span>{{ scope.row.procurementProcurement == 1 ? '是' : '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="isReFund" label="退货">
                <template slot-scope="scope">
                    <span>{{ scope.row.isReFund == 1 ? '是' : '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="procurementTime" label="创建时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.procurementTime.replace("T", " ") }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-search" size="mini" @click="check(scope.row)">查看</el-button>
                    <el-button type="text" icon="el-icon-s-unfold" size="mini" 
                        v-if="scope.row.procurementProcurement == 0 && scope.row.isReFund == 0"
                    @click="quit(scope.row)">退货</el-button>
                    <el-button type="text" plain icon="el-icon-s-finance" size="mini"
                        v-if="scope.row.procurementProcurement == 0 && scope.row.isReFund == 0"
                        @click="enter(scope.row.procurementCode)">入账</el-button>
                    <el-button type="text" icon="el-icon-edit" size="mini"
                        v-if="scope.row.procurementProcurement == 0 && scope.row.isReFund == 0"
                        @click="edit(scope.row.procurementCode)">编辑</el-button>
                    <el-button type="text" icon="el-icon-delete" size="mini"
                        v-if="scope.row.procurementProcurement == 0 && scope.row.isReFund == 0"
                        @click="onDel(scope.row.procurementCode)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageIndex"
            :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount" prev-text="上一页" next-text="下一页" align="center">
        </el-pagination>

        <el-dialog title="查看" :visible.sync="dialogVisible" width="50%">
            <el-descriptions title="采购入库">
                <el-descriptions-item label="订单号：">{{ this.Form.procurementCode }}</el-descriptions-item>
                <el-descriptions-item label="单据类型：">{{ this.Form.documentType }}</el-descriptions-item>
                <el-descriptions-item label="单据状态：">{{ this.Form.procurementState }}</el-descriptions-item>
                <el-descriptions-item label="关联单号：">{{ this.Form.saleCode }}</el-descriptions-item>
                <el-descriptions-item label="制单人：">{{ this.Form.makerName }}</el-descriptions-item>
                <el-descriptions-item label="制单日期：">{{ this.Form.makerTime }}</el-descriptions-item>
                <el-descriptions-item label="发货日期：">{{ this.Form.receiptTime }}</el-descriptions-item>
                <el-descriptions-item label="供应商编号：">{{ this.Form.supplierCode }}</el-descriptions-item>
                <el-descriptions-item label="供应商名称：">{{ this.Form.supplierName }}</el-descriptions-item>
                <el-descriptions-item label="联系人：">{{ this.Form.contactName }}</el-descriptions-item>
                <el-descriptions-item label="电话：">{{ this.Form.phone }}</el-descriptions-item>
                <el-descriptions-item label="备注：">{{ this.Form.remark }}</el-descriptions-item>
            </el-descriptions>
            <template>
                <el-table :data="Procure" border style="width: 100%">
                    <el-table-column prop="procurementCode" label="产品编码">
                    </el-table-column>
                    <el-table-column prop="productName" label="产品名称">
                    </el-table-column>
                    <el-table-column prop="specs" label="规格">
                    </el-table-column>
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                    <el-table-column prop="buyNumber" label="数量">
                    </el-table-column>
                    <el-table-column label="批次" editable>
                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">{{ scope.row.Batch }}</span>
                            <el-input v-else v-model="scope.row.Batch"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="入库数" editable>
                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">{{ scope.row.InWarehouseNumber }}</span>
                            <el-input v-else v-model="scope.row.InWarehouseNumber"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="库位" editable>
                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">{{ scope.row.LocationName }}</span>
                            <el-input v-else v-model="scope.row.LocationName"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价">
                        <template slot-scope="scope">
                            <span> ¥ {{ scope.row.price.toFixed(4) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sumPrice" label="总额">
                        <template slot-scope="scope">
                            <span> ¥ {{ scope.row.sumPrice.toFixed(4) }}</span>
                        </template>
                    </el-table-column>


                </el-table>
            </template>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="退货" :visible.sync="dialogVisible1" width="50%">
            <el-descriptions title="采购退货">
                <el-descriptions-item label="订单号：">{{ this.Form.procurementCode }}</el-descriptions-item>
                <el-descriptions-item label="单据类型：">{{ this.Form.documentType }}</el-descriptions-item>
                <el-descriptions-item label="单据状态：">{{ this.Form.procurementState }}</el-descriptions-item>
                <el-descriptions-item label="关联单号：">{{ this.Form.saleCode }}</el-descriptions-item>
                <el-descriptions-item label="制单人：">{{ this.Form.makerName }}</el-descriptions-item>
                <el-descriptions-item label="制单日期：">{{ this.Form.makerTime }}</el-descriptions-item>
                <el-descriptions-item label="发货日期：">{{ this.Form.receiptTime }}</el-descriptions-item>
                <el-descriptions-item label="供应商编号：">{{ this.Form.supplierCode }}</el-descriptions-item>
                <el-descriptions-item label="供应商名称：">{{ this.Form.supplierName }}</el-descriptions-item>
                <el-descriptions-item label="联系人：">{{ this.Form.contactName }}</el-descriptions-item>
                <el-descriptions-item label="电话：">{{ this.Form.phone }}</el-descriptions-item>
                <el-descriptions-item label="备注：">{{ this.Form.remark }}</el-descriptions-item>
            </el-descriptions>
            <template>
                <el-table :data="Procure" border style="width: 100%">
                    <el-table-column prop="procurementCode" label="产品编码">
                    </el-table-column>
                    <el-table-column prop="productName" label="产品名称">
                    </el-table-column>
                    <el-table-column prop="specs" label="规格">
                    </el-table-column>
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                    <el-table-column prop="buyNumber" label="数量">
                    </el-table-column>
                    <el-table-column label="批次" editable>
                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">{{ scope.row.Batch }}</span>
                            <el-input v-else v-model="scope.row.Batch"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="退货数" editable>
                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">{{ scope.row.returngoods }}</span>
                            <el-input v-else v-model="scope.row.returngoods"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价">
                        <template slot-scope="scope">
                            <span> ¥ {{ scope.row.price.toFixed(4) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sumPrice" label="总额">
                        <template slot-scope="scope">
                            <span> ¥ {{ scope.row.sumPrice.toFixed(4) }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="returngoods()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import { CatProcureMentListAPI, GetProcureStatusAPI, DeleteProcureMentAPI, DeleteProcureMentListAPI, ProcureInAccountAPI, ProcureReturnAPI } from "@/api/BusinessServers/ProcureMent";
import XLSX from 'xlsx';
import { autoGenerateCode } from "@/utils/utils";
export default {
    data() {
        return {
            Procure: [],
            State: [],
            ProcureDetail: [],
            Form: {
                ProcurementCode: "",
                ProductCode: "",
                ProductName: "",
                ProcurementState: 0,
            },
            page: {
                pageIndex: 1,
                pageSize: 5,
                pageCount: 0,
                totalCount: 0,
            },
            dialogVisible: false,
            dialogVisible1: false,
            multipleSelection: [],
            code: "",
        }
    },
    computed: {
        sid() {
            //声明一个空数组
            var sid = [];
            //遍历CategoryList数组
            this.multipleSelection.forEach((item) => {
                //将item.id添加到sid数组中
                sid.push(item.id);
            })
            //返回sid数组
            return sid;
        },
    },
    methods: {
        //导出
        exportListToExcel(dataList) {
            // 过滤需要导出的字段
            const filteredData = dataList.map(item => {
                return {
                    采购单号: item.procurementCode,
                    产品编号: item.productCode,
                    产品名称: item.productName,
                    产品规格: item.specs,
                    单位: item.unit,
                    单价: item.price,
                    数量: item.buyNumber,
                    总额: item.sumPrice,
                    供应商编号: item.supplierCode,
                    供应商名称: item.supplierName,
                    订单总额: item.buyNumber,
                    状态: item.procurementStateName,
                    是否入账: item.supplierCode,
                    创建时间: item.procurementTime,
                    备注: item.remark,
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(filteredData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件   
            XLSX.writeFile(workbook, '采购管理.xlsx');
        },
        //跳转到新增页面
        add() {
            this.$router.push({ path: "ProcureMentAdd" });
        },
        //重置
        result() {
            this.Form.ProcurementCode = "";
            this.Form.ProductCode = "";
            this.Form.ProductName = "";
        },
        //获取库存容量列表
        ProcureList() {
            let params = {
                saleCode: this.Form.ProcurementCode,
                productCode: this.Form.ProductCode,
                name: this.Form.ProductName,
                state: this.Form.ProcurementState,
                pageIndex: this.page.pageIndex,
                pageSize: this.page.pageSize,
            };
            CatProcureMentListAPI(params).then(res => {
                this.Procure = res.data.data;
                this.page.pageCount = res.data.pageCount;
                this.page.totalCount = res.data.totalCount;
            });
        },
        //订单状态
        GetProcureStatus() {
            GetProcureStatusAPI().then(res => {
                this.State = res.data;
            });
        },
        //分页
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.ProcureList();
        },
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.ProcureList();
        },
        //查看
        check(row) {
            this.dialogVisible = true;
            this.Form = row;
            this.ProcureDetail = row;
            console.log(row);
        },
        //删除
        onDel(procurementCode) {
            // 弹出确认框，询问是否删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除分类
                let params = {
                    procurementCode: procurementCode,
                };
                DeleteProcureMentAPI(params).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success("删除成功");
                        this.ProcureList();
                    } else {
                        this.$message.error("删除失败");
                    }
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //批量删除
        onBatchDel() {
            if (this.multipleSelection.length == 0) {
                this.$message.error("请选择要删除的数据");
                return;
            }
            // 弹出确认框，询问是否删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DeleteProcureMentListAPI(this.multipleSelection).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success("删除成功");
                        this.ProcureList();
                    } else {
                        this.$message.error("删除失败");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        edit(code) {
            //跳转到编辑页面
            this.$router.push({ path: "ProcureMentEdit", query: { code: code } });
        },
        enter(code) {
            //入账
            let params = {
                procurementCode: code,
                serialNumber: this.code
            };
            ProcureInAccountAPI(params).then(res => {
                if (res.data.code == 0) {
                    this.open2();
                    this.ProcureList();
                } else {
                    this.$message.error("入账失败");
                }
            });
        },
        open2() {
            this.$notify({
                title: '采购入账',
                message: '入账成功',
                position: 'bottom-right'
            });
        },
        quit(row) {
            this.dialogVisible1 = true;
            this.Form = row;
            this.ProcureDetail = row;
            console.log(row);
        },
        returngoods() {
            let params = {
                procuremenId: this.Form.id,
                documentType: this.Form.documentType,
                documentState: this.Form.procurementState,
                usreName: this.Form.makerName,
                userTime: this.Form.makerTime,
                shipmentsTime: this.Form.receiptTime,
                procurementCode: this.Form.procurementCode,
                ReturnState: 0,
                returnTime: this.Form.procurementTime,
                auditRemark: this.Form.remark,
                procurementDetail: this.Procure,
            };
            ProcureReturnAPI(params).then(res => {
                if (res.data.code == 0) {
                    this.$message.success("退货成功");
                    this.dialogVisible1 = false;
                    this.ProcureList();
                } else {
                    this.$message.error("退货失败");
                }
            });
        },
    },
    mounted() {
        this.ProcureList();
        this.GetProcureStatus();
        this.code = autoGenerateCode('RZ');
    },
}
</script>
<style></style>